<template>
  <div class='wrap'>
    <div class='text'>
      <h1 class='title'>元宇宙介绍</h1>
      <div class='content'>这里是内容简介，比如一些描述性文字，还可以是其他的文字，这里是示例效果</div>
    </div>
    <div class='content_box'>
      <div class='box_wrap1'>
        <div class='box_mask'>
          <h2>虚拟人</h2>
        </div>
      </div>
      <div class='box_wrap2'>
        <div class='box_mask'>
          <h2>虚拟空间</h2>
          </div>
        </div>
      <div class='box_wrap3'>
        <div class='box_mask'>
          <h2>数字孪生</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.wrap{
  height: 110vh;
  background: #ffffff;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  >.text{
    display:flex;
    flex-direction: column;
    align-items: center;
    >.title{
      margin-top:150px;
    } 
    >.content{
      margin:30px 0px;
    }
  }
  >.content_box{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
    width:1520px;
    >.box_wrap1,.box_wrap2,.box_wrap3{
      width:500px;
      height: 60%;
    }
    >.box_wrap2{
      margin:0px 10px;
    }
    >.box_wrap1{
      background-image: url("@/assets/photo1.jpg");
    }
    >.box_wrap2{
      background-image: url("@/assets/photo2.jpg");
    }
    >.box_wrap3{
      background-image: url("@/assets/photo3.jpg");
    }
    >.box_wrap1:hover {
      width:1520px;
    }
    >.box_wrap2:hover{
      width:1520px;
    }
    >.box_wrap3:hover{
      width:1520px;
    }
  }
}
.box_mask{
  background:rgba(0,0,0,0.5);
  color:white;
  height: 100%;
  padding:30px;
  // >h2{
  //   border:1px solid red;
  //   margin-top:20px;
  // };
}
</style>